<template>
  <div class="mc-box">
    <!-- <div class="mask" v-show="dialogVisible" @click="closeDialog"></div> -->
    <div class="margin-box">
      <span class="box_name">外边距</span>
      <div class="margin-top" @click.exact="updateBoxValue" @click.alt.exact="fastReset">
        <span>{{model['margin-top']}}</span>
      </div>
      <div class="margin-right" @click.exact="updateBoxValue" @click.alt.exact="fastReset">
        <span>{{model['margin-right']}}</span>
      </div>
      <div class="margin-bottom" @click.exact="updateBoxValue" @click.alt.exact="fastReset">
        <span>{{model['margin-bottom']}}</span>
      </div>
      <div @click.exact="updateBoxValue" @click.alt.exact="fastReset" class="margin-left">
        <span>{{model['margin-left']}}</span>
      </div>
    </div>
    <div class="border-box">
      <span class="box_name">边框</span>
      <div @click.exact="updateBoxValue" @click.alt.exact="fastReset" class="border-top">
        <span>{{model['border-top-width']}}</span>
      </div>
      <div @click.exact="updateBoxValue" @click.alt.exact="fastReset" class="border-right">
        <span>{{model['border-right-width']}}</span>
      </div>
      <div @click.exact="updateBoxValue" @click.alt.exact="fastReset" class="border-bottom">
        <span>{{model['border-bottom-width']}}</span>
      </div>
      <div @click.exact="updateBoxValue" @click.alt.exact="fastReset" class="border-left">
        <span>{{model['border-left-width']}}</span>
      </div>
    </div>
    <div class="padding-box">
      <span class="box_name">内边距</span>
      <div @click.exact="updateBoxValue" @click.alt.exact="fastReset" class="padding-top">
        <span>{{model['padding-top']}}</span>
      </div>
      <div @click.exact="updateBoxValue" @click.alt.exact="fastReset" class="padding-right">
        <span>{{model['padding-right']}}</span>
      </div>
      <div @click.exact="updateBoxValue" @click.alt.exact="fastReset" class="padding-bottom">
        <span>{{model['padding-bottom']}}</span>
      </div>
      <div @click.exact="updateBoxValue" @click.alt.exact="fastReset" class="padding-left">
        <span>{{model['padding-left']}}</span>
      </div>
    </div>
    <McBoxDialog ref="mcBoxDialog"
      :dialogVisible="dialogVisible"
      :defaultValue.sync="defaultValue"
      :borderStyle="borderStyle"
      :borderColor="borderColor"
      :borderKey="borderKey"
      @onChange="handleChange">
    </McBoxDialog>
  </div>
</template>

<script>

import McBoxDialog from './McBoxDialog'

export default {
  name: 'mc-box',
  components: {
    McBoxDialog
  },
  data () {
    return {
      dialogVisible: false,
      target: '',
      objKey: '',
      borderKey: false,
      borderStyle: '',
      borderColor: '',
      dwObj:{dw:"",val:0},
      defaultValue:0,
    }
  },
  props:{
    //编辑器里会自动合并样式 最终来的值就编程 padding:10px 2px 1px 20px这种 margin也是一样
    'model':{type:Object,default:{}}
  },
  mounted(){
      //让数据更新后 界面能同步刷新
      this.$nextTick(()=>{
          this.splitPaMaCssValue("padding");
          this.splitPaMaCssValue("margin");
          this.splitBorderCssValue();
      })

  },
  watch:{
  },
  methods: {
    splitPaMaCssValue(name){
      var value = this.model[name];
      if(value){
        var values = value.split(/\s+/g);
        var len = values.length;
        if(len==1){//上下左右
          this.reset(name+"-top",values[0]);
          this.reset(name+"-right",values[0]);
          this.reset(name+"-left",values[0]);
          this.reset(name+"-bottom",values[0]);
        }else if(len==2){
          this.reset(name+"-top",values[0]);
          this.reset(name+"-bottom",values[0]);
          this.reset(name+"-right",values[1]);
          this.reset(name+"-left",values[1]);
        }else if(len==3){
          this.reset(name+"-top",values[0]);
          this.reset(name+"-right",values[1]);
          this.reset(name+"-left",values[1]);
          this.reset(name+"-bottom",values[2]);
        }else if(len==4){
          this.reset(name+"-top",values[0]);
          this.reset(name+"-right",values[1]);
          this.reset(name+"-bottom",values[2]);
          this.reset(name+"-left",values[3]);
        }
        this.deleteAttr(name);
      }
    },
    splitBorderCssValue(){
      this.splitBorderWscToTrbl('border-width');
      this.splitBorderWscToTrbl('border-style');
      this.splitBorderWscToTrbl('border-color');

      this.splitBorderTrblToWsc('border-top');
      this.splitBorderTrblToWsc('border-right');
      this.splitBorderTrblToWsc('border-bottom');
      this.splitBorderTrblToWsc('border-left');

      this.splitBorderToWscTrbl('border');

    },
    transeBorderWscName(name,addName){
      var arr = name.split("-");
      return arr[0]+"-"+addName+"-"+arr[1];
    },
    splitBorderWscToTrbl(name){
      if(this.model[name]){
          var value = this.model[name];
          var values = [];
          if(name.search('color')!=-1){
              values = value.match(/rgb\(\d+\s*,\s*\d+\s*,\s*\d+\)|#[a-z0-9]+|\w+/gi)
          }else{
              values = value.split(/\s+/gi)
          }
          var len = values.length;
          if(len==1){//上下左右
             this.reset(this.transeBorderWscName(name,'top'),values[0]);
             this.reset(this.transeBorderWscName(name,'right'),values[0]);
             this.reset(this.transeBorderWscName(name,'bottom'),values[0]);
             this.reset(this.transeBorderWscName(name,'left'),values[0]);
          }else if(len==2){
             this.reset(this.transeBorderWscName(name,'top'),values[0]);
             this.reset(this.transeBorderWscName(name,'bottom'),values[0]);
             this.reset(this.transeBorderWscName(name,'right'),values[1]);
             this.reset(this.transeBorderWscName(name,'left'),values[1]);
          }else if(len==3){
             this.reset(this.transeBorderWscName(name,'top'),values[0]);
             this.reset(this.transeBorderWscName(name,'right'),values[1]);
             this.reset(this.transeBorderWscName(name,'left'),values[1]);
             this.reset(this.transeBorderWscName(name,'bottom'),values[2]);
          }else if(len==4){
             this.reset(this.transeBorderWscName(name,'top'),values[0]);
             this.reset(this.transeBorderWscName(name,'right'),values[1]);
             this.reset(this.transeBorderWscName(name,'bottom'),values[2]);
             this.reset(this.transeBorderWscName(name,'left'),values[3]);
          }
          this.deleteAttr(name);
      }
    },
    splitBorderTrblToWsc(name){
      if(this.model[name]){
        var value = this.model[name];
        if(value){
          var values = value.split(/\s+/g);
          if(values.length>=3){//是否要学习下 有点时候人可能写乱顺序 @TODO
            this.reset(name+'-width',values[0]);
            this.reset(name+'-style',values[1]);
            values[0]="";
            values[1]="";
            //30px dashed rgb(214, 63, 63) 这种颜色很烦人
            this.reset(name+'-color',values.join(''));
            this.deleteAttr(name);
          }
        }
      }
    },
    splitBorderToWscTrbl(name){
        if(this.model[name]){
          var value = this.model[name];
          if(value){
            var values = value.split(/\s+/g);
            if(values.length>=3){//是否要学习下 有点时候人可能写乱顺序 @TODO
              this.reset(name+'-top-width',values[0]);
              this.reset(name+'-right-width',values[0]);
              this.reset(name+'-bottom-width',values[0]);
              this.reset(name+'-left-width',values[0]);

              this.reset(name+'-top-style',values[1]);
              this.reset(name+'-right-style',values[1]);
              this.reset(name+'-bottom-style',values[1]);
              this.reset(name+'-left-style',values[1]);

              values[0]="";
              values[1]="";
              this.reset(name+'-top-color',values.join(''));
              this.reset(name+'-right-color',values.join(''));
              this.reset(name+'-bottom-color',values.join(''));
              this.reset(name+'-left-color',values.join(''));

              this.deleteAttr(name);
            }
          }
        }
    },

    setFocusColor(){
      var parent = this.target.offsetParent.offsetParent;
      var children = parent.children;
      for(var i=0;i<3;i++){
        var node = children[i];
        var cc = node.children;
        for(var j=0;j<cc.length;j++){
          var cnode = cc[j];
          var style = cnode.getAttribute("style");
          if(style){
            cnode.removeAttribute('style')
          }
        }
      }
      //清空其他的颜色
      this.target.setAttribute("style",'background-color:#2b3038');
    },
    toCssName(className){
      if (className.search('border') !== -1){
          return className+"-width";
      }
      return className;
    },
    updateBoxValue (e) {
      this.target = e.target
      if(!this.target.className){
        this.target = this.target.offsetParent
      }
      this.setFocusColor(this.target)
      this.objKey = this.target.className
      this.toNumberValue(this.model[this.toCssName(this.objKey)]);
      this.defaultValue = this.dwObj.val;

      this.borderStyle = this.model[this.objKey + '-style']
      this.borderColor = this.model[this.objKey + '-color']
      if (this.objKey.search('border') !== -1) {
        this.borderKey = true
      } else {
        this.borderKey = false
      }
      this.dialogVisible = true
      this.$refs.mcBoxDialog.open(this.objKey)
    },
    handleChange (val, style, color) {
      if(!this.objKey){
        this.$message({type:"warning",message:"请先选择要设置的边"})
        return;
      }
      this.defaultValue = val || 0;
      this.borderStyle = style;
      this.borderColor = color;
      if(val!==0 && !val){
        this.reset(this.toCssName(this.objKey),val);
      }else{
        this.reset(this.toCssName(this.objKey),val+this.dwObj.dw);
      }
      if(this.borderKey){
        this.reset(this.objKey+'-style',style);
        this.reset(this.objKey + '-color',color);
      }
      this.$emit("change",this.model)
    },
    closeDialog () {
      this.dialogVisible = false
    },
    // 快捷键重置
    fastReset (e) {
      this.target = e.target
      if(!this.target.className){
        this.target = this.target.offsetParent
      }
      this.objKey = this.target.className
      this.defaultValue = 0;

      this.reset(this.toCssName(this.objKey),'');
      if(this.objKey.search('border')!==-1){
        this.borderStyle = '';
        this.borderColor = '';
        this.reset(this.objKey+'-style','');
        this.reset(this.objKey + '-color','');
      }
    },
    reset(cssName,value){
      if(typeof this.model[cssName] !='undefined'){
        this.model[cssName] = value;
      }else{
        this.$set(this.model,cssName,value||"")
      }
    },
    deleteAttr(cssName){
        this.$delete(this.model,cssName)
    },
    //带单位的数据转数字
    toNumberValue(value){
        if(value!==0 && !value){
          this.dwObj.val=0;
          this.dwObj.dw = "px";
          return;
        }
        var arr = (value+"").match(/([\d\.]*)([a-zA-Z%]*)/);
        if(arr[1]!==""){
            this.dwObj.val = Number(arr[1])
        }else{
            this.dwObj.val = 0
        }
        if(arr.length>1 && arr[2]!==""){
            this.dwObj.dw = arr[2];
        }else{
            this.dwObj.dw="px";
        }
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
.mc-box {
  position: relative;
  /*width: 350px;*/
  height: 426px;
  background-color: #404040;
  margin: auto;
  padding-top: 10px;
  text-align: center;
}
.mc-box .mask {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background: #000;
  opacity: 0.4;
  z-index: 999;
}
.mc-box .margin-box {
  position: relative;
  width: 100%;
  height: 200px;
  margin: 0px auto;
}
.mc-box .margin-box .margin-top {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 20%;
  box-sizing: border-box;
  background-color: #4d4d4d;
  -webkit-clip-path: polygon(0 0, 15% 100%, 85% 100%, 100% 0);
  clip-path: polygon(0 0, 15% 100%, 85% 100%, 100% 0);
}
.mc-box .margin-box .margin-right {
  position: absolute;
  top: 0;
  right: 0;
  width: 15%;
  height: 100%;
  box-sizing: border-box;
  background-color: #555555;
  -webkit-clip-path: polygon(0 20%, 0 80%, 100% 100%, 100% 0);
  clip-path: polygon(0 20%, 0 80%, 100% 100%, 100% 0);
}
.mc-box .margin-box .margin-bottom {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 20%;
  box-sizing: border-box;
  background-color: #4d4d4d;
  -webkit-clip-path: polygon(15% 0, 0 100%, 100% 100%, 85% 0);
  clip-path: polygon(15% 0, 0 100%, 100% 100%, 85% 0);
}
.mc-box .margin-box .margin-left {
  position: absolute;
  top: 0;
  left: 0;
  width: 15%;
  height: 100%;
  box-sizing: border-box;
  background-color: #555555;
  -webkit-clip-path: polygon(0 0, 0 100%, 100% 80%, 100% 20%);
  clip-path: polygon(0 0, 0 100%, 100% 80%, 100% 20%);
}
.mc-box .border-box {
  position: relative;
  width: 70%;
  height: 122px;
  margin: -161px auto 0;
}
.mc-box .border-box .box_name {
  top: 1px;
}
.mc-box .border-box .border-top {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 17%;
  box-sizing: border-box;
}
.mc-box .border-box .border-right {
  position: absolute;
  top: 0;
  right: 0;
  width: 14.28571428%;
  height: 100%;
  box-sizing: border-box;
}
.mc-box .border-box .border-bottom {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 17%;
  box-sizing: border-box;
}
.mc-box .border-box .border-left {
  position: absolute;
  top: 0;
  left: 0;
  width: 14.28571428%;
  height: 100%;
  box-sizing: border-box;
}
.mc-box .padding-box {
  position: relative;
  width: 50%;
  height: 80px;
  margin: -101px auto 0;
}
.mc-box .padding-box .padding-top {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 40%;
  box-sizing: border-box;
  background-color: #4d4d4d;
  -webkit-clip-path: polygon(0 0, 25% 100%, 75% 100%, 100% 0);
  clip-path: polygon(0 0, 25% 100%, 75% 100%, 100% 0);
}
.mc-box .padding-box .padding-right {
  position: absolute;
  top: 0;
  right: 0;
  width: 25%;
  height: 100%;
  box-sizing: border-box;
  background-color: #555555;
  -webkit-clip-path: polygon(0 40%, 0 60%, 100% 100%, 100% 0);
  clip-path: polygon(0 40%, 0 60%, 100% 100%, 100% 0);
}
.mc-box .padding-box .padding-bottom {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 40%;
  box-sizing: border-box;
  background-color: #4d4d4d;
  -webkit-clip-path: polygon(25% 0, 0 100%, 100% 100%, 75% 0);
  clip-path: polygon(25% 0, 0 100%, 100% 100%, 75% 0);
}
.mc-box .padding-box .padding-left {
  position: absolute;
  top: 0;
  left: 0;
  width: 25%;
  height: 100%;
  box-sizing: border-box;
  background-color: #555555;
  -webkit-clip-path: polygon(0 0, 0 100%, 100% 60%, 100% 40%);
  clip-path: polygon(0 0, 0 100%, 100% 60%, 100% 40%);
}
.mc-box .margin-top,
.mc-box .margin-bottom {
  line-height: 40px;
  cursor: pointer;
}
.mc-box .margin-left,
.mc-box .margin-right {
  line-height: 200px;
  cursor: pointer;
}
.mc-box .border-top,
.mc-box .border-bottom {
  line-height: 22px;
  cursor: pointer;
}
.mc-box .border-left,
.mc-box .border-right {
  line-height: 124px;
  cursor: pointer;
}
.mc-box .padding-top,
.mc-box .padding-bottom {
  line-height: 32px;
  cursor: pointer;
}
.mc-box .padding-left,
.mc-box .padding-right {
  line-height: 80px;
  cursor: pointer;
}
.mc-box span {
  color: #d9d9d9;
  cursor: pointer;
  font-size:10px;
}
.mc-box .box_name {
  position: absolute;
  top: 5px;
  left: 7px;
  z-index: 1;
  font-family: 'SimSun';
  font-style: oblique;
}

</style>
